import React from "react";
import { createPortal } from "react-dom";

class Dialog extends React.Component {
  constructor() {
    super(...arguments);

    const doc = window.document;
    this.node = doc.createElement("div");
    doc.body.appendChild(this.node);
  }

  componentWillUnmount() {
    window.document.body.removeChild(this.node);
  }
  render() {
    return createPortal(
      <div className="dialog">
        {this.props.children}
        <button
          onClick={() => {
            window.document.body.removeChild(this.node);
          }}
        >
          关闭
        </button>
      </div>, //塞进传送门的JSX
      this.node //传送门的另一端DOM node
    );
  }
}

export default class Portals extends React.Component {
  render() {
    return <Dialog>我是一个好人</Dialog>;
  }
}
